<template>
	<div>
		<el-form
			status-icon
			ref="form"
			:model="formData"
			:label-width="computedLabelWidth"
			v-if="state !== 'hidden'"
			:class="['form']">
			<FromItem
				v-for="(item, index) in formList"
				:config="item"
				@config="val => (item = val)"
				:layout="layout"
				v-model="formData"
				:index="index"
				:state="state"
				v-bind="$attrs"
				fromType="formItems">
				<template v-for="slotName in slots(item)" #[slotName]>
					<slot
						v-if="hasOwnPrototype($slots, slotName)"
						:name="slotName"></slot>
				</template>
				<template v-for="slotName in slots(item)" #[slotName]="scope">
					<slot
						v-if="hasOwnPrototype($scopedSlots, slotName)"
						:name="slotName"
						:row="scope.row || {}"
						:[`$index`]="scope.index"></slot>
				</template>
			</FromItem>
		</el-form>
	</div>
</template>
<script>
	import FromItem from '@/components/A/A-form/formItem/index.vue';
	export default {
		inheritAttrs: false,
		name: 'AForm',
		components: { FromItem },
		props: {
			config: {
				type: Array | Object,
				required: true,
			},
			value: {
				type: Object,
				default: () => {},
			},
			column: {
				default: 3,
			},
			gap: {
				default: '0 100px',
			},
			labelWidth: {
				required: false,
			},
			state: {
				required: false,
			},
			formStatus: {
				required: false,
			},
			layout: {
				required: false,
			},
		},
		data() {
			return {
				computedLabelWidth: '80px',
				obs: null,
			};
		},
		filters: {
			getSelectLabel(T, row, key) {
				let item = row.find(item => {
					return item.value === key;
				});
				return item.label;
			},
		},

		computed: {
			formList: {
				get() {
					if (this.Empty(this.config)) {
						return [];
					}
					if (Array.isArray(this.config)) {
						return this.config;
					} else {
						return [this.config];
					}
				},
				set(val) {
					this.$emit('changeForm', val);
				},
			},
			formData: {
				get() {
					return this.useVModel.call(this);
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				},
			},
		},
		watch: {},
		created() {},
		mounted() {
			this.refRedirect.call(this, 'form');
			// this.initLabelWidth();
			this.ob();
		},
		methods: {
			ob() {
				if (!this.$refs.form) return;
				this.obs = new IntersectionObserver(this.test);
				this.obs.observe(this.$refs.form.$el);
			},
			test(entries) {
				if (entries[0].isIntersecting) {
					this.obs.unobserve(this.$refs.form.$el);
					this.obs.disconnect();
					this.initLabelWidth();
				}
			},
			initLabelWidth() {
				if (this.labelWidth) {
					this.computedLabelWidth = this.labelWidth;
					return;
				}
				let labelWidth = 80;
				let items = Array.from(
					this.$refs.form?.$el.querySelectorAll(
						'.el-form-item__label',
					),
				);
				items?.map(item => {
					if (item.scrollWidth > labelWidth) {
						labelWidth = item.scrollWidth;
					}
				});

				this.computedLabelWidth = `${labelWidth}px`;
			},
			slots(item) {
				if (this.Empty(item?.slot)) return [];
				let slots = [];
				if (typeof item.slot == 'function') {
					slots = item.slot({
						row: this.data,
						index: this.index,
					});
				}
				if (Array.isArray(item.slot)) {
					slots = item.slot;
				}
				if (typeof item.slot == 'string') {
					slots = item.slot.split(',');
				}
				return slots;
			},
			hasOwnPrototype(obj, key) {
				if (typeof obj !== 'object') return false;
				return Reflect.has(obj, key);
			},
			valid() {
				return new Promise(resolve => {
					this.$refs.form.validate(valid => {
						resolve(valid);
					});
				});
			},
		},
		beforeDestroy() {
			this.obs?.disconnect?.();
		},
	};
</script>
<style lang="scss" scoped>
	.form {
		width: 100%;
		padding-top: 10px;
		// padding: 15px 0;
		// display: grid;
		// gap: var(--gap);
		// grid-template-columns: repeat(var(--column), minmax(0, 1fr));
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		gap: 5px 2%;
		.formItem {
			height: 100%;
		}
	}
	::v-deep .el-form-item {
		min-width: 0;
		box-sizing: border-box;
		width: 32%;
		min-width: 300px;
		font-size: 14px;
		display: flex;
		flex-direction: row;
		.el-form-item__label {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			// line-height: 22px;
			text-align: left;
			// margin-bottom: 8px;
			padding: 0;
			// width: fit-content !important;
			word-break: break-all;
			white-space: nowrap;
			color: #8c8c8c;
			min-width: 0;
		}
		.el-form-item__content {
			flex: 1;
			font-size: 14px;
			margin-left: 10px !important;
			// line-height: normal;
			height: auto !important;
			font-weight: 500;
			color: #333;
			min-width: 0;
			// line-height: 22px;
		}
	}

	::v-deep .formItem.el-form-item {
		flex-direction: column;
		.el-form-item__content {
			margin-left: 0 !important;
		}
	}

	::v-deep .inlineBox.el-form-item {
		flex-direction: row;
		.el-form-item__content {
			margin-left: 10px !important;
		}
	}
	::v-deep .columnBox.el-form-item {
		flex-direction: column;
		.el-form-item__content {
			margin-left: 0 !important;
		}
	}
	::v-deep .blockBox.el-form-item {
		width: 100%;
	}
	// ::v-deep .flexBox.el-form-item {
	// 	min-width: 100%;
	// }
	::v-deep .el-form-item:last-child {
		margin-right: auto !important;
	}
</style>
